<template>
	<div class="inspection-task">
		<el-card>
			<div class="header">
				<el-button type="primary" @click="addTask">新增任务</el-button>
				<el-input v-model="searchName" placeholder="搜索物资名称" style="width: 200px; margin-left: 10px" clearable />
				<el-select v-model="searchType" placeholder="筛选检测类型" style="width: 200px; margin-left: 10px" clearable>
					<el-option label="物理检测" value="物理检测" />
					<el-option label="化学检测" value="化学检测" />
					<el-option label="微生物检测" value="微生物检测" />
				</el-select>
			</div>

			<el-table :data="filteredTasks" style="width: 100%; margin-top: 20px" border stripe>
				<el-table-column prop="taskId" label="编码" sortable></el-table-column>
				<el-table-column prop="materialName" label="物资名称" sortable></el-table-column>
				<el-table-column prop="checkType" label="检测类型" sortable></el-table-column>
				<el-table-column prop="checkQuantity" label="检测数量" sortable></el-table-column>
				<el-table-column prop="location" label="位置" sortable></el-table-column>
				<el-table-column fixed="right" label="操作" width="180">
					<template #default="scope">
						<el-button size="small" type="primary" @click="editTask(scope.row)">编辑</el-button>
						<el-button size="small" type="danger" @click="deleteTask(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>

		<!-- 编辑/新增弹窗 -->
		<el-dialog v-model="dialogVisible" title="待检任务" width="500px">
			<el-form :model="currentTask" label-width="120px">
				<el-form-item label="编码">
					<el-input v-model="currentTask.taskId" />
				</el-form-item>
				<el-form-item label="物资名称">
					<el-input v-model="currentTask.materialName" />
				</el-form-item>
				<el-form-item label="检测类型">
					<el-select v-model="currentTask.checkType" placeholder="选择检测类型">
						<el-option label="物理检测" value="物理检测" />
						<el-option label="化学检测" value="化学检测" />
						<el-option label="微生物检测" value="微生物检测" />
					</el-select>
				</el-form-item>
				<el-form-item label="检测数量">
					<el-input-number v-model="currentTask.checkQuantity" :min="1" />
				</el-form-item>
				<el-form-item label="位置">
					<el-input v-model="currentTask.location" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="saveTask">保存</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 模拟数据
const tasks = ref([
	{ taskId: 'TASK001', materialName: '阿莫西林原料', checkType: '化学检测', checkQuantity: 100, location: '仓库A' },
	{ taskId: 'TASK002', materialName: '布洛芬原料', checkType: '物理检测', checkQuantity: 80, location: '仓库B' },
	{ taskId: 'TASK003', materialName: '维生素C原料', checkType: '微生物检测', checkQuantity: 60, location: '仓库C' },
])

for (let i = 4; i <= 15; i++) {
	tasks.value.push({
		taskId: `TASK00${i}`,
		materialName: `物资${i}`,
		checkType: i % 3 === 0 ? '物理检测' : (i % 3 === 1 ? '化学检测' : '微生物检测'),
		checkQuantity: 50 + i * 5,
		location: `仓库${String.fromCharCode(65 + (i % 5))}`
	})
}

const searchName = ref('')
const searchType = ref('')
const dialogVisible = ref(false)
const currentTask = ref({})

// 筛选
const filteredTasks = computed(() =>
	tasks.value.filter(t =>
		(!searchName.value || t.materialName.includes(searchName.value)) &&
		(!searchType.value || t.checkType === searchType.value)
	)
)

// 新增任务
const addTask = () => {
	currentTask.value = { taskId: '', materialName: '', checkType: '', checkQuantity: 1, location: '' }
	dialogVisible.value = true
}

// 编辑任务
const editTask = (row) => {
	currentTask.value = { ...row }
	dialogVisible.value = true
}

// 保存任务
const saveTask = () => {
	if (!currentTask.value.taskId || !currentTask.value.materialName) {
		ElMessage.error('编码和物资名称不能为空')
		return
	}
	const index = tasks.value.findIndex(t => t.taskId === currentTask.value.taskId)
	if (index >= 0) {
		tasks.value[index] = { ...currentTask.value }
		ElMessage.success('任务已更新')
	} else {
		tasks.value.push({ ...currentTask.value })
		ElMessage.success('任务已新增')
	}
	dialogVisible.value = false
}

// 删除任务
const deleteTask = (row) => {
	ElMessageBox.confirm('确认删除该任务吗？', '提示', { type: 'warning' })
		.then(() => {
			tasks.value = tasks.value.filter(t => t.taskId !== row.taskId)
			ElMessage.success('任务已删除')
		})
		.catch(() => { })
}
</script>

<style scoped>
.inspection-task .header {
	display: flex;
	align-items: center;
	gap: 10px;
}
</style>
  
